function Pagination(oBox, options) {
    // 加属性
    this.ele = oBox

    // 准备一些分页信息
    this.default = {
        pageInfo: {
            pagenum: 1, // 当前页
            pagesize: 10, // 一页都少条数据
            totalpage: 100, // 总页数
            total: 1000, // 总条数
        },
        textInfo: {
            prev: '<上一页',
            list: 'list',
            next: '下一页>'
        }
    }

    // options赋值全局
    this.options = options || {}

    // 告诉使用人员当前在哪页
    this.change = options.change

    // 定义list
    this.list = null

    // 调用默认方法
    this.init()
}

Pagination.prototype.init = function() {
    // 替换数据
    this.repalceDefault()

    // box样式
    this.boxCss()

    // 内容div
    this.creDiv()



    // 创建页码
    this.crePage()

    // 事件
    this.addEvent()
}

// 替换数据
Pagination.prototype.repalceDefault = function() {
    for (let attr in this.options.pageInfo) {
        this.default.pageInfo[attr] = this.options.pageInfo[attr]
    }
    for (let attr in this.options.textInfo) {
        this.default.textInfo[attr] = this.options.textInfo[attr]
    }
}

// 设置 box 样式
Pagination.prototype.boxCss = function() {
    this.setCss(this.ele, {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    })
}

// 创建内容标签div
Pagination.prototype.creDiv = function() {
    let textInfo = this.default.textInfo
    for (let attr in textInfo) {
        let div = document.createElement('div')

        div.className = attr
            // 不能有文字和样式
        if (attr === 'list') {
            this.list = div
            this.setCss(div, {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
            })
        } else {
            div.innerHTML = textInfo[attr]
            this.setCss(div, {
                border: '1px solid #d8d8d8',
                color: '#626262',
                width: '64px',
                fontSize: '12px',
                float: 'left',
                lineHeight: '19px',
                textAlign: 'center',
                cursor: 'pointer'
            })
        }

        this.ele.appendChild(div)
    }
}


// 创建分页
Pagination.prototype.crePage = function() {
    let pagenum = this.default.pageInfo.pagenum
    let totalpage = this.default.pageInfo.totalpage

    this.change && this.change(pagenum)

    // 清空内容
    this.list.innerHTML = ''

    // 判断总页数是否大约9
    if (totalpage <= 9) {
        for (let i = 1; i <= totalpage; i++) {
            this.list.appendChild(this.creP(i))
        }
    } else {
        // 当前页小于7
        // 1 2 3  ... 99 100
        if (pagenum <= 3) {
            for (let i = 1; i <= 3; i++) {
                this.list.appendChild(this.creP(i))
            }

            var oS = document.createElement('span')
            this.setCss(oS, {
                border: '1px solid #d8d8d8',
                borderRight: '0',
                padding: '2px 6px',
            })
            oS.innerHTML = '...'
            this.list.appendChild(oS)

            for (let i = totalpage - 1; i <= totalpage; i++) {
                this.list.appendChild(this.creP(i))
            }
        } else if (pagenum > totalpage - 3) {
            // 1 2 ... 98 99 100
            for (let i = 1; i <= 2; i++) {
                this.list.appendChild(this.creP(i))
            }

            var oS = document.createElement('span')
            oS.innerHTML = '...'
            this.setCss(oS, {
                border: '1px solid #d8d8d8',
                borderRight: '0',
                padding: '2px 6px',
            })
            this.list.appendChild(oS)

            for (let i = totalpage - 2; i <= totalpage; i++) {
                this.list.appendChild(this.creP(i))
            }
        } else {
            // 1  ... 48 49 50 51 52 ...  100
            for (let i = 1; i <= 1; i++) {
                this.list.appendChild(this.creP(i))
            }

            var oS = document.createElement('span')
            oS.innerHTML = '...'
            this.setCss(oS, {
                border: '1px solid #d8d8d8',
                borderRight: '0',
                padding: '2px 6px',
            })
            this.list.appendChild(oS)


            for (let i = pagenum - 2; i <= pagenum + 2; i++) {
                this.list.appendChild(this.creP(i))
            }

            var oS = document.createElement('span')
            oS.innerHTML = '...'
            this.setCss(oS, {
                border: '1px solid #d8d8d8',
                borderRight: '0',
                padding: '2px 6px',
            })
            this.list.appendChild(oS)

            for (let i = totalpage - 1; i <= totalpage; i++) {
                this.list.appendChild(this.creP(i))
            }
        }
    }
}

Pagination.prototype.creP = function(i) {
    var p = document.createElement('p')

    p.innerHTML = i

    this.setCss(p, {
        border: '1px solid #d8d8d8',
        borderRight: '0',
        padding: '2px 6px',
        cursor: 'pointer'
    })

    // 当前页高亮
    if (i === this.default.pageInfo.pagenum) {
        this.setCss(p, {
            background: '#ffc601',
            color: '#fff'
        })
    }

    return p
}

// 事件
Pagination.prototype.addEvent = function() {
    let _this = this
        // 事件委托
    this.ele.addEventListener('click', function(ev) {
        if (ev.target.className === 'next') {
            _this.default.pageInfo.pagenum++
                if (_this.default.pageInfo.pagenum > _this.default.pageInfo.totalpage) {
                    _this.default.pageInfo.pagenum = _this.default.pageInfo.totalpage
                }
            _this.crePage()
        }

        if (ev.target.className === 'prev') {
            _this.default.pageInfo.pagenum--
                if (_this.default.pageInfo.pagenum === 0) {
                    _this.default.pageInfo.pagenum = 1
                }
            _this.crePage()
        }

        if (ev.target.tagName === 'P') {
            if (_this.default.pageInfo.pagenum !== parseInt(ev.target.innerHTML)) {
                _this.default.pageInfo.pagenum = parseInt(ev.target.innerHTML)
                _this.crePage()
            }
        }

        if (ev.target.type === 'button') {
            _this.default.pageInfo.pagenum = parseInt(ev.target.previousElementSibling.value)
            _this.crePage()
        }

        // input text 赋值
        _this.ele.children[_this.ele.children.length - 2].value = _this.default.pageInfo.pagenum
    })
}

Pagination.prototype.setCss = function(ele, options) {
    for (let attr in options) {
        ele.style[attr] = options[attr]
    }
}